
template = `<div id="monitor">
    <div id="monitor-cpu-panel">
        <div class="progress-circle">
            <div class="progress-circle_mask_left">
                <div class="progress-circle_fill_left"></div>
            </div>
            <div class="progress-circle_mask_right">
                <div class="progress-circle_fill_right"></div>
            </div>
            <div class="progress-circle_top_circle"></div>
            <div class="progress-circle_final_circle"></div>
        </div>
        <div class="progress-tag">
            <div class="progress-tag_type_text">CPU</div>
            <div class="progress-tag_type_val"></div>
        </div>
    </div>
    <div id="monitor-mem-panel">
        <div class="progress-circle">
            <div class="progress-circle_mask_left">
                <div class="progress-circle_fill_left"></div>
            </div>
            <div class="progress-circle_mask_right">
                <div class="progress-circle_fill_right"></div>
            </div>
            <div class="progress-circle_top_circle"></div>
            <div class="progress-circle_final_circle"></div>
        </div>
        <div class="progress-tag">
            <div class="progress-tag_type_text">MEM</div>
            <div class="progress-tag_type_val"></div>
        </div>
    </div>
    <div id="monitor-storage-panel">
    </div>
</div>`

document.getElementById("win_container").insertAdjacentHTML('beforeend', template);


function set_progress_val_base(id, val) { // 直接设置进度条值
    document.getElementById(id).getElementsByClassName("progress-circle_fill_right")[0].style.transform = `rotate(${min(val * 3.6, 180)}deg)`;
    document.getElementById(id).getElementsByClassName("progress-circle_fill_left")[0].style.transform = `rotate(${max(val * 3.6 - 180, 0)}deg)`;
    document.getElementById(id).getElementsByClassName("progress-circle_final_circle")[0].style.transform = `rotate(${val * 3.6}deg)`;
    document.getElementById(id).getElementsByClassName("progress-tag_type_val")[0].innerHTML = Math.round(val) + "%";
}

old_var = {
    "monitor-cpu-panel": 0,
    "monitor-mem-panel": 0
}

new_var = {
    "monitor-cpu-panel": 0,
    "monitor-mem-panel": 0
}

function set_progress_val(id, val) { // 设置进度条值
    new_var[id] = val;
}

setInterval(() => { // 进度条动画
    for (id in new_var) {
        old_var[id] = (new_var[id] + old_var[id]) / 2;
        set_progress_val_base(id, old_var[id]);
    }
}, 50)

function receiveMessage(event) { // 注册
    var data = JSON.parse(event.data)["data"];
    set_progress_val("monitor-cpu-panel", data["cpu_usage"]);
    set_progress_val("monitor-mem-panel", data["memory_usage"]);
    // 遍历 disk_usage array
    template_all_str = ""
    for (var i = 0; i < data["disk_usage"].length; i++) {
        var disk_usage = data["disk_usage"][i];
        var disk_name = disk_usage["mountpoint"];
        template_str = `
            <div class="disk-progress">
                <div class="disk-progress_name">${disk_name}</div>
                <div class="disk-progress_val_all">
                    <div class="disk-progress_val_full" style="width: ${disk_usage["percent"]}%;"></div>
                </div>
            </div>
        `
        template_all_str += template_str
    }
    document.getElementById("monitor-storage-panel").innerHTML = template_all_str;
}

